<template>
<div class="con">
    <div id="background" class="wall" ></div>
    <!--<div id="midground" class="wall"></div>
    <div id="foreground" class="wall"></div>
    -->
    <div class="txt">博雅高级中学</div>
    <div class="login">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名：" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="pwd">
                <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"  size="medium"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"  size="medium">登录</el-button>
                <el-button @click="resetForm('ruleForm')"  size="medium">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
import { login, getCaptcha } from "../api/login.js"
export default {
    data() {
        var validateUsername = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入用户名'));
            } else {
                callback();
            }
        };
        var validatePwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                pwd: '',
                username: ''
            },
            rules: {
                username: [{
                    validator: validateUsername,
                    trigger: 'blur'
                }],
                pwd: [{
                    validator: validatePwd,
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {        
                    let result = await login({
                        userName: this.ruleForm.username,
                        pwd: this.ruleForm.pwd
                    })
                    if(result.data.token) {
                        localStorage['user'] = this.ruleForm.username;
                        localStorage["token"] = result.data.token;
                        this.$router.push({
                            path: "/main"
                        })
                    }
                    else {
                        console.log(result);
                        this.$message({
                            message: '用户名或密码错误',
                            type: 'error' // 提示消息类型，可选值包括 success、info、warning 和 error
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {
    },
}
</script>

<style>
    .captchacon img{
        width: 100px;
    }
    body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        margin: 0;
        background-size: 100%;
    }
    .login {
        background-color: white;
        width: 20%;
        padding: 250px 60px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    .txt {
        position: absolute;
        top: 130px;
        left: 160px;
        font-size: 40px;
        color: white;
        font-weight: bold;
    }
    * { margin: 0; padding: 0; border: 0; } 
	        html,body{
	        	margin: 0;
	        }
	        @-webkit-keyframes STAR-MOVE {
				from {
					background-position:0% 0%
				}
				to { 
					background-position: 600% 0%
				}
			}
			 @keyframes STAR-MOVE {
				from {
					background-position: 0% 0%
				}
				to { 
					background-position: 600% 0%
				}
			}
			.wall{
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				
			}
			div#background{
                background-size: contain;
				background-image: url('../assets/bg.jpg');
                background-repeat: no-repeat
				/**
                
				-webkit-animation: STAR-MOVE  200s linear infinite;
				-moz-animation: STAR-MOVE  200s linear infinite;
				-ms-animation: STAR-MOVE  200s linear infinite;
				animation: STAR-MOVE  200s linear infinite;
                */
            }
			div#midground{
				background:url('../assets/img/midground.png')repeat 20% 0%;
				z-index: 1;
				-webkit-animation: STAR-MOVE  100s linear infinite;
				-moz-animation: STAR-MOVE  100s linear infinite;
				-ms-animation: STAR-MOVE  100s linear infinite;
				animation: STAR-MOVE  100s linear infinite;
			}
			div#foreground{
				background:url('../assets/img/foreground.png')repeat 35% 0%;
				z-index: 2;
				-webkit-animation: STAR-MOVE  50s linear infinite;
				-moz-animation: STAR-MOVE  50s linear infinite;
				-ms-animation: STAR-MOVE  50s linear infinite;
				animation: STAR-MOVE  50s linear infinite;
			}
</style>
